<template>
  <form class="search" action="/">
    <van-search
      class="vansearch"
      v-model="value"
      shape="round"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
    />
  </form>
</template>

<script>
import { ref } from "vue";
import { Toast } from "vant";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const value = ref("");
    const onSearch = (val) => Toast(val);
    const onCancel = () => router.push("/home/index");
    return {
      value,
      onSearch,
      onCancel,
    };
  },
};
</script>

<style lang="less" scoped>
.vansearch {
  width: 375px;
  height: 60px;
}
</style>
